<template>
	<view class="goods-cards">
		<!-- 商品卡片 -->
		<view class="card-item" v-for="(item,index) in goods" :key="index">
			<!-- 卡片上部 -->
			<view class="card-up">
				<image class="card-img" :src="item.thumb" mode="aspectFill" />
			</view>
			<!-- 卡片下部 -->
			<view class="card-down">
				<view class="good-name">
					盲盒名称
				</view>
				<!-- 盲盒价格 -->
				<view class="good-price">
					<span class="pricedemo">￥39.00</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				goods: [{
					thumb: this.imagesUrl('soldier.png')
				}, {
					thumb: this.imagesUrl('hot-dark.png')
				}, {
					thumb: this.imagesUrl('soldier.png')
				}, {
					thumb: this.imagesUrl('hot-dark.png')
				}, {
					thumb: this.imagesUrl('soldier.png')
				}, ]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-cards {
		margin: 40rpx auto;
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.card-item {
			border-radius: 15rpx;
			// margin: 16rpx auto;
			margin-bottom: 18rpx;
			color: white;
			width: 336rpx;
			height: 478rpx;
			background-color: rgb(29, 29, 29);

			.card-up {
				width: 336rpx;
				height: 336rpx;

				.card-img {
					width: 100%;
					height: 100%;
				}
			}

			.card-down {
				width: 336rpx;
				height: 142rpx;
				display: flex;
				flex-direction: column;
				position: relative;

				.good-name {
					margin-top: 24rpx;
					font-size: 28rpx;
					margin-bottom: 26rpx;
					margin-left: 16rpx
				}

				.good-price {
					margin-left: 16rpx;
					height: 40rpx;
					position: absolute;
					bottom: 24rpx;

					.pricedemo {
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>